<template>
  <div class="user_team">
		<title-bar :title="'合作团长'" />
    <van-cell-group style="margin-top: 46px;">
      <div class="title_text">
        <!-- <div slot="title"> -->
        <span style="margin-left: 10px;">团长：{{total}}</span>
        <form action="/" class="flex_1">
          <van-search v-model="searchValue" placeholder="请输入姓名或者电话搜索" @search="onSearch" background="#00CC66" />
        </form>
        <!-- </div> -->
      </div>
    </van-cell-group>
    <van-cell-group>
 		<van-button style="margin-top: 5px;" round type="danger" size="large" @click="invite">邀请团长</van-button>
      <van-list v-model="loading" class="scroll-load" :finished="finished" :immediate-check="false" :offset="100" @load="loadMore">
        <van-cell v-for="item in items" :key="item.id" :to="'/user/shop-order-list/' + item.id">
          <div slot="title" class="user_member">
            <div class="user_avatar">
              <img :src="item.avatar" alt="头像">
            </div>
            <div class="user_info">
              <div>{{item.realname}}</div>
              <div style="font-size: 12px; color: gray;">{{item.createtime}}</div>
            </div>
            <div class="desc_info">
              <div>订单数量：<b class="red">{{item.total}}</b><van-icon name="arrow" /></div>
            </div>
          </div>
        </van-cell>
      </van-list>
    </van-cell-group>
     <is-empty v-if="isEmpty">没有找到符合条件的记录</is-empty>
 </div>
</template>

<script>
import {
  COMMANDER_TEAM
} from '@/api/user';
import loadMore from "@/vue/mixin/list-load-more";
import IsEmpty from "@/vue/components/is-empty/";
import TitleBar from '@/vue/components/title-bar/';
import {
  Search
} from 'vant';

export default {
  mixins: [loadMore],
  data() {
    return {
      shopId: this.getUser().id,
      total: 0,
      searchValue: ''
    }
  },
  created() {
    this.resetInit();
  },

  methods: {
    initData() {
      return this.$reqGet(
        COMMANDER_TEAM, {
          memberId: this.shopId,
          offset: (this.pages.currPage - 1) * this.pages.perPage,
          limit: this.pages.perPage,
          queryItem: this.searchValue
        }, {
          hideLoading: true
        }
      ).then(res => {
        const {
          rows,
          total
        } = res.data.data;
        this.items.push(...rows);
        this.total = total;
        return {
          pageCount: rows.length,
          totalCount: total
        };
      });
    },

    onSearch() {
      this.resetInit();
    },

    invite() {
      this.$router.push({name: 'team-invite'});
    },
  },
  components: {
    [Search.name]: Search,
    [IsEmpty.name]: IsEmpty,
		[TitleBar.name]: TitleBar
  }
}
</script>

<style lang="scss" scoped>
	.title_text {
		background-color: $green;
		color: white;
		display: flex;
		line-height: 44px;
	}
	.user_team{
		background-color: #fff;
	}
	.user_member{
		display: flex;

		.user_avatar{
			height: 55px;
			width: 55px;
			border-radius: 50%;
			overflow: hidden;
			img{
				max-width: 100%;
				max-height: 100%;
			}
		}

		.user_info{
			margin-left: 10px;
			flex: 2;
		}
		.desc_info {
			text-align: right;
      font-size: 12px;
      padding: 15px 0;
      > b {
        font-size: 15px;
      }
      i {
        margin-left: 10px;
      }
		}
	}
</style>
